<template>
  <div class="cfg-toolbar-floatMenu-menu-outline">
    <Icon type="md-apps" class="cfg-toolbar-floatMenu-menu-icon" @click.native="menuShow=!menuShow"/>
    <transition>
      <div v-show="menuShow" class="cfg-toolbar-floatMenu-menu">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "cfg-toolbar-floatMenu",
  components: {},
  data(){
    return {
      menuShow:false,
    }
  },
  props:{
    show:{
      default:()=>{
        return false;
      }
    },
  },
  watch:{
    show:function(){
      this.menuShow=!this.menuShow;
    }
  },
  methods:{

  }
}
</script>

<style scoped lang="scss">
.cfg-toolbar-floatMenu-menu-outline {
  margin:0 5px;
  width:20px;
  height:20px;
}
.cfg-toolbar-floatMenu-menu-icon {
  font-size:20px;
}
.cfg-toolbar-floatMenu-menu {
  display: block;
  position: relative;
  left:0px;
  top:0px;
  z-index:999;
  transition: all 0.2s ease-in-out;
}
</style>